<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/common/mytags.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>编辑头像信息</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>common/frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>common/css/gobal.css" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>common/css/animate.css" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>backstage/css/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>backstage/css/createActive.css" media="all">
    <style type="text/css">
        img{
            cursor: pointer;
            height: 200px;
            width: 200px;
            border-radius:200px;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
</head>
<body>


<div class="larry-fluid larry-wrapper">

    <div class="layui-row lay-col-space20">
        <div class="layui-cos-xs12 layui-col-sm12 layui-col-md12">
            <section class="larry-body animated layui-anim-scaleSpring">
                <div class="larry-body-content clearfix" >
                    <form class="layui-form" action="" method="post">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <c:if test="${ empty requestScope.pic}">
                                    <img  id="showImg" src="<%=basePath%>backstage/img/timg.gif">
                                </c:if>
                                <c:if test="${not empty requestScope.pic}">
                                    <img  id="showImg" src="${requestScope.pic}">
                                </c:if>
                                <br/> <br/>
                                <div class="layui-upload-drag"  id="bannerPic">
                                    <i class="layui-icon"></i>
                                    <p>点击上传，或将文件拖拽到此处</p>
                                </div>
                               <!-- <button type="button" class="layui-btn layui-btn-radius" id="bannerPic"><i class="layui-icon">&#xe67c;</i>选择图片</button>-->
                                <input type="hidden" name="pic" id="qiniu_bannerPic" value="${requestScope.pic}">
                            </div>
                        </div>

                        <div class="layui-form-item" style="text-align: center;margin-top: 25px;margin-left: 33px;">
                            <button class="layui-btn" lay-submit="" lay-filter="ok">确定</button>
                            <button type="layui-btn" id="cancle" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                        <input type="hidden" name="userId"  id="bannerId"  value="${requestScope.userId}">
                        <input type="hidden" name="oldPic" id="oldPic" value="${requestScope.pic}">

                    </form>
                </div>
            </section>
        </div>
    </div>
</div>

<script type="text/javascript" src="<%=basePath%>common/frame/layui/layui.js"></script>
<script type="text/javascript">


    layui.config({
        base: "<%=basePath%>common/larrylib/",
        version: '201708031'
    }).use(['jquery', 'form', 'upload'], function () {
        var $ = layui.jquery, form = layui.form, upload = layui.upload,e =layui.$;

        //监听提交
        form.on("submit(ok)", function (data) {
            var pic = data.field.pic;
            if(pic==""){
                layer.msg("请上传个人头像！", {icon: 5});
                return false;
            }

            var url = "<%=basePath%>user/do/update/pic";
            var loginLoading = layer.msg('头像上传中，请稍候...', {icon: 16, time: false, shade: 0.8});
            $.ajax({
                url: url,
                type: 'post',
                async: false,
                data: data.field,
                dataType: "json",
                success: function (data) {
                    if (data.state == 200) {
                        layer.close(loginLoading);
                        window.parent.document.getElementById("admin-photo").src = pic;
                        var index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        top.layer.msg(data.message, {icon: 6});
                        return true;
                    } else {
                        layer.msg(data.message, {icon: 5});
                        layer.close(loginLoading);
                        return false;
                    }

                }, error: function () {
                    layer.msg("系统数据处理异常！", {icon: 2});
                    layer.close(loginLoading);
                    return false;
                }
            });
        });

        //取消
        $("#cancle").click(function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });


        var loginLoading1;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#bannerPic'
            , url: "<%=basePath%>upLode/qiNiu/file/save"
            ,accept: 'file'
            ,size:1024*2
            ,multiple:true
            , before: function (obj) {
                loginLoading1 = top.layer.msg('个人头像上传中，请稍候...', {icon: 16, time: false, shade: 0.8});
                obj.preview(function (index, file, result) {
                });
            }
            , done: function (data) {
                //console.log(data);
                //如果上传失败
                if (data.state != 200) {
                    top.layer.close(loginLoading1);
                    return top.layer.msg("个人头像上传失败！", {icon: 5});
                }
                var imgUrl = data.data[0].filePath;
                $("#qiniu_bannerPic").val(imgUrl);
                $('#showImg').attr('src', imgUrl);
                top.layer.close(loginLoading1);

                top.layer.msg("个人头像上传成功！", {icon: 6});
            }
            , error: function () {
                if(show=="" || show==null){
                    $("#showImg").show();
                    $("#span").hide();
                }
                if(show!="" && show!=null){
                    $("#showImg").hide();
                    $("#span").show();
                }
                return top.layer.msg("个人头像上传失败！", {icon: 5});
                top.layer.close(loginLoading1);
            }
        });

    });
</script>
</body>
</html>